<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>filter</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div id="app"></div>
    <br>
    <div id="app2"></div>
    <script>
        Vue.filter('getTime',function(time){
            let y = new Date(time).getFullYear();
                    let m = new Date(time).getMonth()+1;
                    let d = new Date(time).getDate();
                    let h = new Date(time).getHours();
                    let n = new Date(time).getMinutes();
                    let s = new Date(time).getSeconds();
                return '过滤后的-' + ` ${y} 年 ${m}月 ${d}日 ${h}时 ${n}分 ${s}秒`
        });
        let app2 = {
            template:`<div>{{ 1621067012000 | getTime }}</div>`
        };
        let app = {
            template:`
                <div>
                    <button @click=" isShow = !isShow">a</button>
                    <div v-if="isShow">
                        <input type="number" v-model="input1">+
                        <input type="number" v-model="input2">={{ addCount() }} {{ getAdd }}
                    </div>
                    <br>
                    <ul>
                        <li v-for="item in list">{{ item | filtersTime | filter2 | filter3}}</li>
                        <li v-for="item in list">{{ item | getTime}}</li>
                    </ul>
                </div>
            `,
            data(){
                return {
                    isShow:true,
                    input1:0,
                    input2:0,
                    list:[1620370936258,1621067012000,1621012312000,1621017862000]
                }
            },
            methods:{
                addCount(){
                    console.log('方法')
                    let num = Number(this.input1) + Number(this.input2)
                    return num
                }
            },
            computed:{
                getAdd(){
                    console.log('计算')
                    let num = Number(this.input1) + Number(this.input2)
                    return num
                }
            },
            filters:{
                filtersTime(time){
                    let y = new Date(time).getFullYear();
                    let m = new Date(time).getMonth()+1;
                    let d = new Date(time).getDate();
                    let h = new Date(time).getHours();
                    let n = new Date(time).getMinutes();
                    let s = new Date(time).getSeconds();
                    return ` ${y} 年 ${m}月 ${d}日 ${h}时 ${n}分 ${s}秒`
                 },
                 filter2(value){
                     return '哈哈' + value
                 },
                 filter3(value){
                     return '嘿嘿'+ value
                 }
            }
        };
        new Vue({
           render:function(createElement){
               return createElement(app);
           }
        }).$mount('#app');
        new Vue({
           render:function(createElement){
               return createElement(app2);
           }
        }).$mount('#app2');
    </script>
</body>
</html>